<template>
	<view class="container">
        <div class="banner" :style="{backgroundImage: `url(${data.avatar})`}"></div>
        <div class="info">
            <div class="top">
                <div class="name">{{data.name || '-'}}</div>
            </div>
            <div class="middle">
                <div class="price">￥{{data.totalFee || '-'}}</div>
                <div class="num">已服务 {{data.alearServiceByNums || '-'}}</div>
            </div>
        </div>
        <div class="intro-process">
            <div class="title">服务流程</div>
            <div class="process-box">
                <div class="process-item">预约</div>
				<image class="process-pic" src="https://bizser.njtrh.com:9954/images/biztd/20211209/20211209011647516.jpg">
                <div class="process-item">支付</div>
                <image class="process-pic" src="https://bizser.njtrh.com:9954/images/biztd/20211209/20211209011647516.jpg">
                <div class="process-item">评估</div>
            </div>
            <div class="process-box">
                <div class="process-item">派单</div>
				<image class="process-pic" src="https://bizser.njtrh.com:9954/images/biztd/20211209/20211209011647516.jpg">
                <div class="process-item">上门</div>
                <image class="process-pic" src="https://bizser.njtrh.com:9954/images/biztd/20211209/20211209011647516.jpg">
                <div class="process-item">结束</div>
            </div>
        </div>
        <div class="intro-detail">
            <div class="title">服务详情</div>
		    <u-parse class="content" @imgtap="clickImg" :html="data.expert"></u-parse>
        </div>

		<u-popup v-model="visiable" width="80%" height="60%" border-radius="14" mode="center">
            <div class="modal-wrapper">
			    <div class="modal-title">知情通知书</div>
                <div class="modal-content">
                    <scroll-view scroll-y="true" style="height: 100%;" class="text">
                        <p style="text-align: center">居家照护服务协议</p>
                        <p>甲方：上海德地健康管理有限公司</p>   
                        <p>乙方：</p>                           
                        <p>本着服务社会、服务老人、互助互利的原则，为营造温馨、舒适、安全的生活环境，保证居家养老服务质量，规范服务行为，满足老年人“老有所养、老有所乐”的需要，切实保障老年人的合法权益，明确各自的权利义务，经过甲、乙双方友好协商，就居家照护（照料、护理）服务事宜，自愿达成以下协议条款，供各方遵照履行：</p>
                        <p>一、服务内容、费用等约定</p>
                        <p>根据乙方的选择，并给予双方协商一致，甲方选派照护人员为乙方提供居家照护服务，服务的内容、次数、时间、场所、费用以及期限等作为本协议附件的“照护服务包”约定为准。</p>
                        <p>二、乙方的权利和义务</p>
                        <p>1、有选择、更换照护人员的权利，但请求调换的时间应提前一周告知甲方。</p>
                        <p>2、正确理解居家照护工作的性质，有依约定接受服务的权利，但对照护人员也要以礼相待。</p>
                        <p>3、乙方有按约定按时向甲方支付服务费的义务，乙方未按时支付服务费的，甲方可以视情暂停服务。</p>
                        <p>4、照护人员为乙方提供生活服务时，乙方自身正常所需支出的费用应由乙方承担；乙方如需就医，其产生的费用应由乙方自行承担。非因照护人员的过失所造成的人身伤害（如乙方自己在日常生活中，外出活动时所发生人身伤害）其赔偿费用应由责任人来承担。</p>
                        <p>5、乙方及时提供服务所需各种证件材料。若因乙方原因致使照护人员无法服务，照护人员不承担责任，由乙方与甲方协调处理。</p>
                        <p>6、乙方积极配合甲方做好服务工作，提高工作效率。乙方应实事求是地对照护人员的服务进行考勤和工作评定，不得有无辜强加照护人员服务项目的行为。</p>
                        <p>7、乙方不得与甲方选派的照护人员私下达成任何服务协议，不得私下接受照护人员超过本协议约定的服务，也不应向照护人员直接支付费用。否则，一旦发生任何问题，甲方概不负责。</p>
                        <p>三、甲方的权利和义务</p>
                        <p>1、主动关心乙方的需求，向乙方提供合适的照护人员，建立照护人员档案，并保证照护人员身份清楚、身体健康、无不良社会记录。</p>
                        <p>2、甲方应告知乙方照护人员的情况，乙方认为表现不好的照护人员，甲方应按约定予以更换。</p>
                        <p>3、甲方可以通过电话或者派出工作人员走访、征求乙方意见、了解照护人员服务情况，核实乙方提出的问题，及时予以协调沟通。</p>
                        <p>4、尊重和维护乙方的合法权利，安排照护人员开展居家照护服务项目，全心全意为老人服务，负责监督管理照护人员日常工作。</p>
                        <p>5、甲方及时协调解决乙方和照护人员在服务过程中出现的矛盾纠纷。</p>
                        <p>四、协议延续与终止</p>
                        <p>1、“照护服务包”约定的服务期限到期的，乙方可与甲方续签或者重新选定新的“照护服务包”，本协议继续有效。</p>
                        <p>2、“照护服务包”约定的服务期限到期的，乙方没有续签也没有重新选定新的“照护服务包”，则本协议终止。</p>
                        <p>3、协议期未满，乙方要求解除协议，应提前一周通知甲方，乙方无故要求解除协议的，应由乙方负完全责任。</p>
                        <p>4、乙方逾期支付服务费且未和甲方达成一致的，甲方有权暂停服务直至解除协议。</p>
                        <p>五、其他</p>
                        <p>1、非照护人员原因，乙方发生意外，甲方及照护人员均不承担责任。</p>
                        <p>2、甲、乙双方共同遵守国家的法律法规及社会公德，任何一方出问题各自负责。</p>
                        <p>3、因本协议发生纠纷，应先协商解决，协商不成可向青浦区人民法院提起诉讼。</p>
                        <p>4、若乙方为无民事行为能力或限制民事行为能力人，乙方监护人应与乙方承担连带责任。</p>
                        <p>5、本协议一式两份，甲乙双方各执一份，自签署之日生效。</p>
                    </scroll-view>
                </div>
                <div class="modal-confirm">
                    <u-checkbox-group>
		            	<u-checkbox v-model="isAgree" shape="circle" active-color="#FB7133" size="28" label-size="24">我已阅读并同意<span>《居家照护服务协议书》</span></u-checkbox>
		            </u-checkbox-group>
                </div>
                <div class="btn-confirm" :class="{active: isAgree}" @click="confirm">确认</div>
            </div>
		</u-popup>
        <div class="footer">
            <div class="btn-buy" @click="handlePre">立即预约</div>
        </div>

        <u-toast ref="uToast" />
	</view>
</template>

<script>
import Vue from 'vue';
import { 
	getNursingInfoAPI,
    getHousekeepingInfoAPI
} from '../../api/service'

const app = getApp()
export default Vue.extend({
	data() {
		return {
            data: {
                name: '',
                nursingServiceDetailList: []
            },
            address: '',
            addressId: '',
            addressList: app.globalData.addressList,
            visiable: false,
            isAgree: false,
            type: 1,
		}
	},
	onLoad(options) {
        let { id, type } = options
        this.type = type
        let api = type == 1 ? getNursingInfoAPI : getHousekeepingInfoAPI
        api({serviceInfoId: id}).then(res => {
            if(type == 1){
                this.data = res.nursingServiceVo
            } else {
                this.data = res.homeServiceVo
            }
            console.log('详情', this.data)
        })
	},
    methods: {
        clickImg(e){
            // 阻止图片预览
            e.ignore()
        },
        confirm(){
            let query = {
                id: this.data.id,
                name: this.data.name,
                pic: this.data.avatar,
                type: this.type,
                serviceList: JSON.stringify(this.type == 1 ? this.data.nursingServiceDetailList : this.data.homeServiceDetailList)
            }
            if(this.isAgree){
                this.$u.route('pages/serviceOrder/serviceOrder', query)
            }
        },
        handlePre(){
            if(this.type == 1) {
                this.isAgree = false
                this.visiable = true
            } else {
                this.isAgree = true
                this.confirm()
            }
        },
    }
});
</script>

<style lang="scss" scoped>
@import '../../assets/scss/common.scss';

.container{
    min-height: 100vh;
    background-color: #efefef;
    padding-bottom: 120rpx;
}

.banner{
    height: 200px;
    background-size: cover;
}
.info{
    background-color: #fff;
    margin-bottom: 15rpx;
    .top{
        display: flex;
        padding: 20rpx 40rpx;
        justify-content: space-between;
        .name{
            flex: auto;
            font-size: 18px;
            line-height: 30px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
        }

    }
    .middle{
        justify-content: space-between;
        padding: 0rpx 40rpx;
        display: flex;
        align-items: baseline;
        padding-bottom: 20rpx;
        .price{
            color: #FB7133;
            font-size: 18px;
            line-height: 30px;
        }
        .num{
            color: #A7A7A7;
        }
    }
}
.intro-process{
    background-color: #fff;
    margin-bottom: 15rpx;
    .title{
        font-size: 36rpx;
        padding: 20rpx 40rpx;
    }
    .process-box{
        display: flex;
        justify-content: space-between;
        padding: 20rpx 40rpx;
        align-items: center;
        .process-item{
            padding: 10rpx 26rpx;
            border-radius: 8rpx;
            line-height: 1;
            color: #fff;
            background-color: $theme-color;
        }
        .process-pic{
            width: 92rpx;
            height: 20rpx;
        }
    }
}
.intro-detail{
    background-color: #fff;
    margin-bottom: 10rpx;
    .title{
        font-size: 36rpx;
        padding: 20rpx 40rpx;
    }
    .content{
        // padding: 0 40rpx 20rpx;
        word-wrap: break-word;
        // text-indent: 1.5em;
        img{
            width: 100%;
        }
    }
}
.address{
    background-color: #fff;
    padding: 0 40rpx;
    font-size: 28rpx;
    line-height: 80rpx;
    display: flex;
    justify-content: space-between;
    margin-bottom: 15rpx;
    .label{
        flex: auto;
        overflow: hidden;
	    white-space: nowrap;
	    text-overflow: ellipsis;
    }
    .item{
        flex: none;
    }
}
.footer{
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 60px;
    background-color: #fff;
    text-align: right;
    padding-top: 10px;
    .btn-buy{
        display: inline-block;
        color: #fff;
        background-color: $theme-color;
        font-size: 18px;
        line-height: 40px;
        padding: 0 20px;
        margin-right: 20px;
        border-radius: 20px;
    }
}
.modal-wrapper{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 0 40rpx;
    .modal-title{
        width: 100%;
        text-align: center;
        flex: none;
        font-size: 32rpx;
        line-height: 1;
        color: #534F4F;
        padding: 30rpx 0;
    }
    .modal-content{
        flex: auto;
        font-size: 26rpx;
        color: #707070;
        padding: 20rpx 10rpx;
        overflow: auto;
        margin-bottom: 20rpx;
        .text{
            line-height: 48rpx;
        }
    }
    .modal-confirm{
        flex: none;
        font-size: 12px;
        margin-bottom: 20rpx;
    }
    .btn-confirm{
        flex: none;
        width: 180rpx;
        text-align: center;
        font-size: 36rpx;
        line-height: 70rpx;
        color: #fff;
        background-color: #ccc;
        border-radius: 10rpx;
        margin-bottom: 50rpx;
        transition-duration: 0.2s;
        &.active{
            background-color: $theme-color;
        }
    }
}
</style>
